import React, { Component } from 'react'
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  TouchableHighlight,
  TouchableOpacity,
  TouchableNativeFeedback,
  TouchableWithoutFeedback,
} from 'react-native'

export default class index extends Component {

  render() {
    return (
      <View style={[styles.container]}>

        <TouchableHighlight
          style={{ marginBottom: 10 }}
          onPress={() => {
            alert('触碰高亮显示 ~')
          }}
        >
          <Text style={{ fontSize: 30, borderWidth: 1, borderColor: '#5e7ce0', }}>TouchableHighlight</Text>
        </TouchableHighlight>

        <TouchableOpacity
          style={{ marginBottom: 10 }}
          onPress={() => {
            alert('触碰透明度变化 ~')
          }}
        >
          <Text style={{ fontSize: 30, borderWidth: 1, borderColor: '#5e7ce0', }}>TouchableOpacity</Text>
        </TouchableOpacity>

        <TouchableNativeFeedback
          style={{ margin: 10 }}
          onPress={() => {
            alert('触碰有响应 ~')
          }}
        >
          <Text style={{ fontSize: 30, borderWidth: 1, borderColor: '#5e7ce0', }}>TouchableNativeFeedback</Text>
        </TouchableNativeFeedback>

        <TouchableWithoutFeedback
          style={{ marginBottom: 10 }}
          onPress={() => {
            alert('触碰无响应 ~')
          }}
        >
          <Text style={{ fontSize: 30, borderWidth: 1, borderColor: '#5e7ce0', }}>TouchableWithoutFeedback</Text>
        </TouchableWithoutFeedback>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
  },
})
